<?php error_reporting(0); ?>
@extends('stu.stu')
@section('title', '学生信息输入系统')
@section('sidebar')
    @parent
    <p>This is appended to the master sidebar.</p>
@endsection
@section('content')
    <div id="app">

        <fieldset style="width: 600px;" >

            <legend>学生信息录入系统</legend>

            <div>姓名：<input type="text" placeholder="请写入你的大名" v-model="user.name"/></div>    <!-- v-model  双向绑定数据 -->
            <br />
            <div>年龄：<input type="text" v-model="user.age"/></div>
            <br />
            <div>性别:&nbsp;&nbsp;<select v-model="user.sex">

                    <option>男</option>

                    <option>女</option>

                </select>
            </div>
            <br />
            <div>手机：<input type="text"  placeholder="请输入你的大哥大号码" v-model="user.phoneNumber"/></div>
            <br />

            <button type="submit" @click="newUser">创建新用户</button>


        </fieldset>

        <br />

        <table  style="text-align: center;border: 1px solid red;">
            <tr>
                <th width="100px">姓名</th>
                <th width="100px">性别</th>
                <th width="100px">年龄</th>
                <th width="200px">手机</th>
                <th width="100px">删除</th>
            </tr>
            <!--遍历得到所有的数据-->

            <tr v-for="(item,index) in users">
                <td>{{index}}-{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>{{item.phoneNumber}}</td>

                <td><button @click="del(index)">删除</button></td>
            </tr>

        </table>

    </div>
    <div id="app1">
        <p>{{message}}</p>
    </div>
    </body>

    <script type="text/javascript">
        new Vue({
            el: '#app1',
            data: {
                message: 'Hello Vue.js!'
            }
        })
        var app=new Vue({
            el:"#app",
            data:{

                user:{
                    name:"账户",
                    sex: "",
                    age:"",
                    phoneNumber:""

                },
                users:[
                    {name:"张三", sex:"男",age:"18",phoneNumber:"153683585655"},
                ]
            },

            methods:{
                //将data中的值添加到数组中

                newUser:function(){
                    if(this.user.name==""){
                        alert("名字错误");
                    }else if(this.user.age==""||this.user.age<0){
                        alert("年龄错误");

                    }else{
                        this.users.push({name:this.user.name,sex:this.user.sex,age:this.user.age,phoneNumber:this.user.phoneNumber})
                    }
                },
                del:function(index){
                    this.users.splice(index,1);
                },
            }
        });
    </script>
@endsection